<template>
    <div>
        <el-table :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
            style="width: 100%">
            <el-table-column label="编号" prop="id">
            </el-table-column>
            <el-table-column label="姓名" prop="username">
            </el-table-column>
            <el-table-column label="性别" prop="sex">
            </el-table-column>
            <el-table-column label="年龄" prop="age">
            </el-table-column>
            <el-table-column label="住址" prop="address">
            </el-table-column>
            <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="handler">
            <el-form ref="form" :model="user" label-width="80px">
                <el-form-item label="编号" v-show="user.id">
                    <el-input v-model="user.id"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="user.sex" placeholder="请选择性别">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="user.age"></el-input>
                </el-form-item>
                <el-form-item label="住址">
                    <el-input v-model="user.address"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" class="input" @click="addSubmit()">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import instance from '../../utils/request'

export default {
    name: "Users",
    data() {
        return {
            tableData: [],
            search: '',
            user: {}
        }
    },
    methods: {
        getList() {
            instance.get("/user/list").then(success => {
                if (success.data.code == 200) {
                    this.tableData = success.data.data;
                } else {
                    alert(success.data.msg);
                }
            }).catch(error => {
                console.log(error);
            })
        },
        handleEdit(index, row) {
            console.log(index, row);
        },
        handleDelete(index, row) {
            instance.get("/user/del?id=" + this.tableData[index].id + "").then(success => {
                if (success.data.code == 200) {
                    this.openSuccess("用户信息删除成功！");
                    this.getList();
                } else {
                    this.openWarning(success.data.msg);
                }
            }).catch(error => {
                this.openWarning(error.message);
            });
        },
        addSubmit() {
            instance.post("/user/add", this.user).then(success => {
                if (success.data.code == 200) {
                    this.openSuccess("用户信息添加成功!");
                    this.user = {};
                    this.getList();
                } else {
                    this.openWarning(success.data.msg);
                }
            }).catch(error => {
                this.openWarning(error.message);
            })
        },
        openSuccess(msg) {
            this.$notify({
                title: '成功!',
                message: msg,
                type: 'success'
            })
        },
        openWarning(msg) {
            this.$notify({
                title: '失败!',
                message: msg,
                type: 'warning'
            })
        }
    },
    created() {
        this.getList();
    }
}
</script>

<style scoped>
.handler {
    margin-top: 20px;
    width: 250px;
}

.input {
    width: 150px;
}
</style>